<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的驿站</title>
<link href="images/css.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* body {
            margin: 0;
            padding: 0;
            background: url(images/唐朝广州冬天的景色.png) no-repeat center center fixed;
            background-size: cover;
        } */
</style>
</head>

<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
  <div class="navigation">
    <img src="images/头像.jpg" height="100" />
    <ul>
        <li><a href="index.html">主页</a></li>
        <li><a href="haoyou.html">我的偶像</a></li>
        <li><a href="photo.html">我的相册</a></li>
        <li><a href="rizhi.html">我的日志</a></li>
        <li><a href="yinyue.html">我的音乐</a></li>
    </ul>
</div>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" class="main">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td><table width="800" border="0" cellspacing="10" cellpadding="0">
      <tr>
        <td><div class="title">我的相册</div></td>
        </tr>
      <tr>
        <td valign="top"><table width="800" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="images/15.jpg" width="250" border="0" class="click-to-zoom"/></td>
            <td><img src="images/20.jpg" width="260" border="0" class="click-to-zoom"/></td>
            <td><img src="images/22.jpg" width="260" class="click-to-zoom"/></td>
          </tr>
          <tr>
            <td><img src="images/6.jpg" width="250" border="0" class="click-to-zoom"/></td>
            <td><img src="images/9.jpg" width="260" border="0"class="click-to-zoom" /></td>
            <td><img src="images/16.jpg" width="260"class="click-to-zoom" /></td>
          </tr>
          
          <tr>
            <td><img src="images/10.jpg" width="260"class="click-to-zoom" /></td>
            <td><img src="images/13.jpg" width="260" class="click-to-zoom"/></td>
            <td><img src="images/14.jpg" width="260" class="click-to-zoom"/>
             </td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
          </tr>
        </table>       
          </td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<script>
  document.addEventListener("DOMContentLoaded", function() {
      const images = document.querySelectorAll(".click-to-zoom");
      
      images.forEach(function(image) {
          image.addEventListener("click", function() {
              // 创建一个遮罩层
              const overlay = document.createElement("div");
              overlay.classList.add("overlay");
              
              // 创建放大的图片
              const zoomedImg = document.createElement("img");
              zoomedImg.src = this.src;
              
              // 添加样式
              overlay.style.position = "fixed";
              overlay.style.top = 0;
              overlay.style.left = 0;
              overlay.style.width = "100%";
              overlay.style.height = "100%";
              overlay.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
              overlay.style.display = "flex";
              overlay.style.justifyContent = "center";
              overlay.style.alignItems = "center";
              
              zoomedImg.style.maxWidth = "90%";
              zoomedImg.style.maxHeight = "90%";
              
              overlay.appendChild(zoomedImg);
              
              document.body.appendChild(overlay);
              
              overlay.addEventListener("click", function() {
                  overlay.remove();
              });
          });
      });
  });
  </script>
  
</body>
</html>
